<template>
	<view class="friendslistPage">
		<view class="tab">
			<view @tap="changeTab(index)" :class="tabBarsIndex === index ? 'tabActive':''" v-for="(item,index) in tabBars" :key="index">{{item.name}}<text
				 class="tabNum" v-if="item.num > 0">{{item.num}}</text></view>
		</view>

		<view class="friendslist">
			<swiper class="swiper" :duration="150" circular :current="tabBarsIndex" @change="onChangeTab">
				<swiper-item v-for="(item,index) in tabBars" :key="index" class="swiperItem">
					<scroll-view scroll-y class="swiperView" @scrolltolower="loadmore(index)">
						<template v-if="list.length > 0">
							<block v-for="(item,index) in list" :key="index">
								<!-- 列表样式 -->
								<userInfo :item="item" :index="index" />

							</block>
							<!-- 上拉加载 -->
							<!-- <view class="loadmore">
								<text>加载中...</text>
							</view> -->
						</template>

						<!-- 当没有数据时提示信息 -->
						<template v-else>
							<nothing />
						</template>

					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import userInfo from "@/components/friendslist/user-info.vue";
	export default {
		onLoad() {
			this.getDate();
		},
		components: {
			userInfo
		},
		data() {
			return {
				// tab
				tabBarsIndex: 0, //当前默认选中tab
				tabBars: [{
					name: "互关",
					num: 4
				}, {
					name: "关注",
					num: 15
				}, {
					name: "粉丝",
					num: 30
				}],

				// 用户列表数据
				list: [],
			};
		},
		// 监听点击搜搜按钮事件
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url: `../search/search?type=friendslist`
			})
		},
		onNavigationBarButtonTap() {
			// 点击取消按钮时
			uni.navigateBack({
				delta: 1
			});
		},
		methods: {
			changeTab(index) {
				this.tabBarsIndex = index;
			},
			// 监听滑动
			onChangeTab(e) {
				this.changeTab(e.detail.current);
			},
			getDate() {
				this.list = [{
					headPortrait: "https://picsum.photos/100/100?random=1",
					nickName: "好人",
					gender: 0,
					age: 24,
					isFollow: false
				}, {
					headPortrait: "https://picsum.photos/100/100?random=2",
					nickName: "看故事",
					gender: 1,
					age: 40,
					isFollow: true
				}, {
					headPortrait: "https://picsum.photos/100/100?random=3",
					nickName: "不是的吧",
					gender: 0,
					age: 14,
					isFollow: false
				}, {
					headPortrait: "https://picsum.photos/100/100?random=4",
					nickName: "靓仔",
					gender: 1,
					age: 18,
					isFollow: true
				}];
			},
		},
	}
</script>

<style lang="scss">
	// tab
	.tab {
		@include flexCenterCenter;
		height: 100rpx;
		border-bottom: 2rpx solid #E5E5E5;

		>view {
			letter-spacing: 10rpx;
			flex: 1;
			text-align: center;
		}

		.tabActive {
			@include fontMainColor;
			font-size: 1.08rem;
			font-weight: bolder;

			>text {
				font-size: 0.9rem;
			}
		}

		// 数值样式
		.tabNum {
			letter-spacing: 1rpx;
			margin-left: 10rpx;
			font-size: 0.9rem;
		}
	}

	.friendslist {
		height: calc(100% - 100rpx);
		width: 100%;
	}
</style>
